<template>
  <div style="width: 100%">
    <div class="business" v-if="hierarchy === 2">
      <div
        class="subDetail"
        v-for="item in data"
        :key="(item[fieldNames.subCode] as string)"
      >
        <div class="head">
          <div class="sub-title">
            <p class="icon"></p>
            {{ item[fieldNames.subName] }}
          </div>
          <!-- <div v-if="editBtnShow" class="setting" @click="change">
            <icon-edit />设置
          </div> -->
        </div>
        <div style="width: 90%; margin: auto">
          <a-form
            v-if="type === 'editData'"
            ref="HumanForm"
            :model="item[fieldNames.subRelDetail]"
            autoLabelWidth
          >
            <a-row :gutter="16">
              <a-col
                v-for="(ele, index) in item[fieldNames.subRelDetail]"
                :key="index"
                :span="(ele?.span as number)"
              >
                <FormItem
                  :disabled="disabled"
                  :componentType="(ele?.ctlComponentType as string)"
                  :props="(ele?.props as any)"
                  :name="(ele[fieldNames.sonName] as string)"
                  :required="(ele?.required as any)"
                  v-model:values="ele.values"
                  :code="(ele[fieldNames.subCode] as any)"
                />
              </a-col>
            </a-row>
          </a-form>
          <div v-else style="display: flex; justify-content: center">
            <div class="cn">
              <div
                class="cn-main"
                v-for="ele in item?.subRelDetail"
                :key="ele.ctlCode"
                v-show="ele.show"
              >
                <span>{{ ele.ctlCnName + ':' }}</span>
                <a-input class="cn-input" disabled placeholder="自动获取" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="business" v-else>
      <div class="subDetail">
        <div class="head">
          <div class="sub-title">
            <p class="icon"></p>
            基础信息
          </div>
          <!-- <div class="setting" @click="change"><icon-edit />设置</div> -->
        </div>
      </div>
      <div style="width: 90%; margin: auto">
        <div class="cn">
          <div
            class="cn-main"
            v-for="ele in data"
            :key="ele.ctlCode"
            v-show="ele.show"
          >
            <span>{{ ele.cnName + ':' }}</span>
            <a-input class="cn-input" disabled placeholder="自动获取" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <SettingShow
    :hierarchy="hierarchy"
    v-model:visible="settingShow"
    :data="data"
    @upshowData="upshowData"
    @sortshowData="sortshowData"
  ></SettingShow>
</template>
<script setup lang="ts">
import FormItem from '@/components/DynamicFormsNew/RenderingForm/FormItem/index.vue';
const props = withDefaults(
  // 参数说明
  defineProps<{
    data?: any; // 控件数据
    type: 'editData' | 'editShow'; // 编辑或显示
    hierarchy: number; // 层级 编辑默认 2
    isDisabled?: boolean; // 是否可以编辑
    editBtnShow?: boolean; // 编辑按钮是否显示
    fieldNames?: {
      subCode: string;
      subName: string;
      subRelDetail: string;
      sonName: string;
      sonCode: string;
    };
  }>(),
  {
    hierarchy: 2,
    isDisabled: false,
    editBtnShow: true,
    fieldNames: () => ({
      subCode: 'subCode',
      subName: 'cnName',
      subRelDetail: 'subRelDetail',
      sonName: 'ctlCnName',
      sonCode: 'ctlCode'
    })
  }
);
console.log('props', props);

const emit = defineEmits(['upshowData', 'sortshowData']);
const disabled = ref(false);
const settingShow = ref(false);
watch(
  () => props.isDisabled,
  (val) => {
    console.log('disabled.value', disabled.value);

    disabled.value = val;
  }
);
const change = () => {
  if (props.type === 'editData') {
    disabled.value = !disabled.value;
  } else {
    settingShow.value = true;
  }
};

const upshowData = (e: any) => {
  emit('upshowData', e);
};

const sortshowData = (e: any) => {
  emit('sortshowData', e);
};
</script>
<style lang="less" scoped>
.business {
  width: 90%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  .subDetail {
    width: 100%;
    .head {
      box-sizing: border-box;
      border-radius: 4px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 10px;
      background-color: #e8f0ff;
      margin: 20px 0;
      .sub-title {
        display: flex;
        align-items: center;
        .icon {
          border-radius: 4px;
          width: 6px;
          height: 70%;
          background-color: #3d7eff;
          height: 20px;
          padding: 0;
          margin: 3px 0;
          margin-right: 10px;
        }
      }
      .setting {
        color: #3d7eff;
        cursor: pointer;
      }
    }
  }
}

.cn {
  width: 85%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .cn-main {
    display: flex;
    width: 45%;
    margin-bottom: 20px;
    align-items: center;
    span {
      width: 100px;
      text-align: end;
      margin-right: 20px;
    }

    .cn-input {
      flex: 1;
    }
  }
}
</style>
